<template>
	<view style="padding-bottom: 220rpx;">
		<view class="livehome">
			<!-- 搜索 -->
			<view class="conInput">
				<image src="../../static/search.png"></image>
			</view>
			<!-- 关注、推荐 -->
			<view class="vj-jk">
				<view class="live-lk" @click="tabEr(1)">
					<view>关注</view>
					<image v-if="tabDer == 1" src="../../static/by-ui.png"></image>
				</view>
				<view class="live-lk" @click="tabEr(2)">
					<view>推荐</view>
					<image v-if="tabDer == 2" src="../../static/by-ui.png"></image>
				</view>
			</view>
			<!-- 列表 -->
			<view class="live-main">
				<view class="live-lst" v-for="item in 5" @click="goLive">
					<view class="li-listcv">
						<view class="liveStreaming">
							直播中
						</view>
						<view class="live-name">
							<view class="txtNA">昵称</view>
							<view class="live-ghk">
								<view class="live-ghk-left">
									<image src="../../static/sk-e.png"></image>
									<view>20</view>
								</view>
								<view class="live-ghk-right">
									安徽
								</view>
							</view>
						</view>
						<view class="live-bg">
							<!-- <image src="../../../../static/image/shopp.png"></image> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部导航 -->
		<rwj-tabbar :tabNum="tabNum"></rwj-tabbar>  
	</view>
</template>

<script>
	import rwjTabbar from '../../components/liveStreamingBottom'; //搜索
	export default {
		components: {
			rwjTabbar
		},
		data() {
			return {
				tabNum:'1',
				tabDer:2
			}
		},
		onShow() {
			
		},
		methods:{
			tabEr(i){
				this.tabDer = i
			},
			goLive(){
				uni.navigateTo({
					url:"/pages/home-btn/pages/v-live/live"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.livehome{
	width: 96%;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 10rpx;
	margin-top: 25rpx;
	.conInput{
		position: absolute;
		right: 0;
		height: 100rpx;
		line-height: 100rpx;
		margin-right: 60rpx;
		image{
			width: 31rpx;
			height: 31rpx;
		}
	}
	.vj-jk{
		display: flex;
		align-items: center;
		width: 60%;
		margin: 0 auto;
		justify-content: space-around;
		height: 100rpx;
		line-height: 100rpx;
		.live-lk{
			display: flex;
			align-items: center;
			position: relative;
			font-weight: 400;
			font-size: 31rpx;
			color: #333333;
			image{
				width: 71rpx;
				height: 41rpx;
				position: absolute;
			}
		}
	}
}
.live-main{
	padding-bottom: 20rpx;
	overflow: hidden;
	.live-lst{
		width: 50%;
		margin: 0 auto;
		text-align: center;
		float: left;
		margin-top: 20rpx;
		.li-listcv{
			width: 92%;
			height: 335rpx;
			margin: 0 auto;
			// text-align: center;
			background: #E6E6E6;
			border-radius: 10rpx;
			position: relative;
			.liveStreaming{
				position: absolute;
				z-index: 2;
				width: 88rpx;
				height: 32rpx;
				background: rgba(255,255,255,0.5);
				border-radius: 16rpx;
				border: 1px solid #A6A6A6;
				font-weight: 400;
				font-size: 21rpx;
				color: #333333;
				margin: 17rpx 15rpx;
			}
			.live-name{
				position: absolute;
				z-index: 2;
				bottom: 0;
				margin-bottom: 20rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
				width: 100%;
				.txtNA{
					text-align: left;
					margin-left: 20rpx;
				}
				.live-ghk{
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					margin-top: 15rpx;
					.live-ghk-left{
						display: flex;
						align-items: center;
						margin-left: 20rpx;
						image{
							width: 22rpx;
							height: 22rpx;
							margin-right: 20rpx;
						}
					}
					.live-ghk-right{
						margin-right: 20rpx;
					}
				}
			}
			.live-bg{
				width: 100%;
				height: 100%;
				position: absolute;
				image{
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
		}
	}
}
</style>